<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .box{
        width: 1070px;
        height: 450px;
        background-color: transparent;
        border-left: 1px solid rgb(255,192,203);
        border-bottom: 1px solid rgb(255,192,203);
        margin:50px auto;
        display: flex;
        align-items: end;
        justify-content: space-around;
    }
    .box div span{
        position: absolute;
        width: 50px;
        height: 20px;
        top: -20px;
        text-align: center;
    }
    .box div p{
        position: absolute;
        width: 80px;
        bottom: -30px;
        left: -15px;
        text-align: center;
    }
    .box div{
        position: relative;
        width: 50px;
        height: 20px;
    }
</style>
<body>
    <script>
        let arr=[]
        for(let i = 0; i <= 4;i++ ){
            arr.push(prompt(`请输入第${i+1}季度产值`))
        }
        let str = `<div class = "box">`
            for(let j = 0; j <arr.length; j++){
                str +=`<div style = "height:${arr[j]}px;
                background-color:rgb(255,192,203);">
                <span>${arr[j]}</span>
                <p>第${j+1}季度</p>
                </div>`
            }
            document.write(str)
            
    </script>
</body>
</html>